<template>
  <div class="waterTable">
    <h3>{{ $t('equipmentManagement.shebei136') }}</h3>
    <i class="el-icon-caret-top" @click="colseTable"></i>
    <el-table
      :data="tableData"
      style="width: 100%"
      height="385"
      border
      @sort-change="handleSortChange"
    >
      <el-table-column
        prop="operationLog"
        key="operationLog"
        :label="$t('equipmentManagement.shebei140')"
        show-overflow-tooltip
        align="center"
        min-width="370"
      />
      <el-table-column
        prop="privateKey"
        :label="$t('equipmentManagement.shebei38')"
        show-overflow-tooltip
        align="center"
        min-width="370"
      />
      <el-table-column
        prop="deviceType"
        :label="$t('equipmentManagement.shebei97')"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
        <template slot-scope="scope">
          <span v-show="scope.row.deviceType == '1'">{{
            $t('equipmentManagement.shebei105')
          }}</span>
          <span v-show="scope.row.deviceType == '2'">{{
            $t('equipmentManagement.shebei106')
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        key="deviceOrderControl"
        align="center"
        prop="deviceOrderControl"
        :label="$t('equipmentManagement.shebei112')"
        show-overflow-tooltip
        min-width="150"
      >
        <template slot-scope="props">
          <span v-show="props.row.deviceOrderControl == '0'">{{
            $t('equipmentManagement.shebei101')
          }}</span>
          <span v-show="props.row.deviceOrderControl == '1'">{{
            $t('equipmentManagement.shebei102')
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="clientVersion"
        :label="$t('equipmentManagement.shebei98')"
        show-overflow-tooltip
        min-width="100"
      />
      <el-table-column
        prop="deviceStatus"
        :label="$t('equipmentManagement.shebei44')"
        show-overflow-tooltip
        align="center"
      >
        <template slot-scope="scope">
          <!-- 已删除 -->
          <span v-show="scope.row.deviceStatus == '0'">{{ $t('add.add61') }}</span>
          <!-- 已锁定 -->
          <span v-show="scope.row.deviceStatus == '1'">{{ $t('add.add56') }}</span>
          <!-- 已激活 -->
          <span v-show="scope.row.deviceStatus == '2'">{{ $t('add.add57') }}</span>
          <!-- 已开放 -->
          <span v-show="scope.row.deviceStatus == '4'">{{ $t('add.add59') }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="businessStatus"
        :label="$t('equipmentManagement.shebei99')"
        show-overflow-tooltip
        align="center"
      >
        <template slot-scope="scope">
          <span v-show="scope.row.businessStatus == '0'">{{
            $t('equipmentManagement.shebei101')
          }}</span>
          <span v-show="scope.row.businessStatus == '1'">{{
            $t('equipmentManagement.shebei102')
          }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="bindStatus"
        :label="$t('equipmentManagement.shebei13')"
        show-overflow-tooltip
        align="center"
      >
        <template slot-scope="scope">
          <span v-show="scope.row.bindStatus == '1'">{{ $t('equipmentManagement.shebei14') }}</span>
          <span v-show="scope.row.bindStatus == '2'">{{ $t('add.add58') }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="partnerDeptName"
        :label="$t('add.add74')"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        key="probationaryPeriod"
        prop="probationaryPeriod"
        :label="$t('equipmentManagement.shebei123')"
        show-overflow-tooltip
        min-width="120"
      />
      <el-table-column
        align="center"
        key="trialEndTime"
        prop="trialEndTime"
        :label="$t('equipmentManagement.shebei118')"
        show-overflow-tooltip
        min-width="200"
      />
      <el-table-column
        prop="cycle"
        :label="$t('equipmentManagement.shebei125')"
        align="center"
        show-overflow-tooltip
        min-width="140"
      />
      <el-table-column
        prop="deletionReason"
        :label="$t('equipmentManagement.shebei108')"
        align="center"
        show-overflow-tooltip
        min-width="200"
      />
      <el-table-column
        prop="createDate"
        :label="$t('equipmentManagement.shebei109')"
        align="center"
        show-overflow-tooltip
        min-width="170"
        sortable="custom"
      />
      <el-table-column
        prop="updaterUser"
        :label="$t('equipmentManagement.shebei7')"
        align="center"
        show-overflow-tooltip
      >
        <template slot="header" slot-scope="scope">
          <div class="updaterUser_box">
            <span>{{ $t('equipmentManagement.shebei7') }}</span>
            <!-- <i class="el-icon-close" @click="colseTable"></i> -->
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin: 16px 0; text-align: right">
      <el-pagination
        background
        :current-page.sync="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'waterTable',
  props: {},
  data() {
    return {
      page: 1, // 默认第1页
      total: 0, // 总条数
      limit: 10, // 每页条数
      sortType: 'desc',
      tableData: [],
    };
  },
  props: {
    serialNo: {
      type: String,
      default: '',
    },
  },
  watch: {
    serialNo() {
      this.toQuery();
    },
  },

  created() {
    this.toQuery();
  },

  methods: {
    handleSortChange({ prop, order }) {
      if (order === 'ascending') {
        this.sortType = 'asc';
      } else if (order === 'descending') {
        this.sortType = 'desc';
      }
      this.toQuery();
    },
    toQuery() {
      this.$http
        .post('/deviceflowingwater/deviceFlowingWaterPageData', {
          sortType: this.sortType,
          serialNo: this.serialNo,
          limit: this.limit.toString(),
          page: this.page.toString(),
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.tableData = res.data.list;
            this.tableData.forEach((item) => {
              if (item.deviceStatus == 2) {
                // 已激活状态下需要判断时间是否是空
                if (!item.probationaryPeriod) {
                  item.probationaryPeriod = this.$t('equipmentManagement.shebei101');
                }
                if (!item.cycle) {
                  item.cycle = this.$t('equipmentManagement.shebei101');
                }
              }
            });
            this.total = res.data.total;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },

    handleSizeChange(val) {
      this.limit = val;
      this.toQuery();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.toQuery();
    },
    colseTable() {
      this.$emit('closeWaterTable');
    },
  },
};
</script>

<style lang="scss">
.waterTable {
  position: relative;
  > h3 {
    margin-bottom: 10px;
  }
  > .el-icon-caret-top {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 55px;
    cursor: pointer;
    color: #003e67;
  }
  .updaterUser_box {
    i {
      position: absolute;
      top: 0px;
      right: 20px;
      cursor: pointer;
      font-size: 16px;
    }
  }
}
</style>
